<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Boilerplate</title>
    <link href="css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="css/buttons.dataTables.min.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/jquery.table2excel.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/dataTables.buttons.min.js"></script>
    <script src="js/buttons.print.min.js"></script>
</head>
<body>
<a href="/log?action=attendanceLog&xls=true&start=0&length=10"
   download="xx.xls">导出Excel</a>
<div class="row-fluid" style="margin-top: 20px">
    <div class="span1"></div>
    <div class="span10">

        <table id="table_local" class="row-border hover order-column" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>图片</th>
                <th>编号</th>
                <th>姓名</th>
                <th>卡号</th>
                <th>验证时间</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>
</body>

<script type="text/javascript">
    var table;

    $(document).ready(function() {
    var lastIdx = null;

<!--datatables表格初始化方法-->
    table = $('#table_local').DataTable({
        //通过ajax向后台controller请求数据
        ajax : {
            url : "/log?action=attendanceLog",
            dataSrc:"result",
            data : function ( d )  {
                 var searchContent =$(':input[type=search]').val();
                //添加额外的参数传给服务器
                console.info(searchContent);
                d.search = searchContent;
            }
        },
        //绑定列数据，名字和json串里的key相同，只有这里绑定了表格中才会显示数据
        columns : [
            {data : 'personEntity.image',render:function(data){
                return "<img height='100' src='data:image/png;base64,"+data+"'/>";
            }},
            {data : 'personEntity.code'},
            {data : "personEntity.name"},
            {data : "personEntity.card"},
            {data : "personEntity.createTime"}
        ],

        processing : true, //打开数据加载时的等待效果
        serverSide : true,//打开后台分页
        ordering : false,//是否启用排序
        searching : true,//是否  启用模糊搜索
        //当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
        deferRender : true,
        //国际化设置（设置中文显示）
        language : {


            search : '<span class="label label-success">搜索：</span>',//右上角的搜索文本，可以写html标签

            paginate : {//分页的样式内容。
                previous : "上一页",
                next : "下一页",
                first : "第一页",
                last : "最后"
            },

            "lengthMenu": "每页 _MENU_ 条记录",
            "zeroRecords": "没有找到记录",
            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
            "infoEmpty": "无记录",
            "infoFiltered": "(从 _MAX_ 条记录过滤)"
        },
        paging : true,
        pagingType : "full_numbers"//分页样式的类型full_numbers
    });

    $("#table_local_filter input[type=search]").css({
        width : "auto"
    });//右上角的默认搜索文本框，不写这个就超出去了。




});



</script>
</html>
